﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="CDOP.Home" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
    <link href="Styles/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-family: Arial;
            background: #fff url(Images/bg.png) no-repeat top left;
        }
        .title
        {
            width: 548px;
            height: 119px;
            position: absolute;
            top: 300px;
            left: 300px;
            background: transparent url(Images/title.png) no-repeat top left;
        }
        a.back{                
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                top:25px;
                right:0px;
            }
        #content
        {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    	<div id="content">
        <form id="Form1" runat="server">
       <asp:LinkButton CssClass="back" ID="lnkBtnLogOut" runat="server" OnClick="LnkBtnLogOutClick">Log Out</asp:LinkButton>
       </form>
        <div class="title">
        </div>
        <div class="navigation" id="nav">
            <div class="item user">
                <img src="images/bg_user.png" alt="" width="199" height="199" class="circle" />
                <a href="#" class="icon"></a>
                <h2>
                    Record Actions</h2>
                <ul>
                    <li><a href="AddMasterDetailsData.aspx">Add Record</a></li>
                    <li><a href="SearchPatient.aspx">Search Records</a></li>
                </ul>
            </div>
            <div class="item home">
                <img src="images/bg_home.png" alt="" width="199" height="199" class="circle" />
                <a href="#" class="icon"></a>
                <h2>
                    Reports</h2>
                <ul>
                    <li><a href="Charts/AllCharts.aspx">View All Charts</a></li>
                    <li><a href="Charts/DynamicChart.aspx">Dynamic Report</a></li>
                </ul>
            </div>
            <div id="dvAdmin" runat="server" class="item camera">
                <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle" />
                <a href="#" class="icon"></a>
                <h2>
                    Admin Activities</h2>
                <ul>
                    <li><a href="UserRegistration.aspx">Add User</a></li>
                    <li><a href="Default.aspx">Manage Tables</a></li>
                </ul>
            </div>
        </div>
    </div>
	
	 <script type="text/javascript">
	     $(function () {
	         $('#nav > div').hover(
                function () {
                    var $this = $(this);
                    $this.find('img').stop().animate({
                        'width': '199px',
                        'height': '199px',
                        'top': '-25px',
                        'left': '-25px',
                        'opacity': '1.0'
                    }, 500, 'easeOutBack', function () {
                        $(this).parent().find('ul').fadeIn(700);
                    });

                    $this.find('a:first,h2').addClass('active');
                },
                function () {
                    var $this = $(this);
                    $this.find('ul').fadeOut(500);
                    $this.find('img').stop().animate({
                        'width': '52px',
                        'height': '52px',
                        'top': '0px',
                        'left': '0px',
                        'opacity': '0.1'
                    }, 5000, 'easeOutBack');

                    $this.find('a:first,h2').removeClass('active');
                }
            );
	     });
    </script>
</body>
</html>
